<script src="{{ asset('js/jquery-1.8.3.min.js') }}" type="text/javascript"></script>
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<meta name="_token" content="{{csrf_token()}}">
<link rel="stylesheet" href="{{URL::asset('./css/reset.css')}}">
<link rel="stylesheet" href="{{URL::asset('./css/public.css')}}">
<link rel="stylesheet" href="{{URL::asset('./css/order/pay_order.css')}}">

<!-- home.activity.actPay -->
<div class="main" id="actpay" v-cloak>
    <div class="payheader">
        <a href="{{route('home.index.index') }}">
            <img :src="headerLogo" alt="">
        </a>
        <div class='rightStep'>
            <div class="completed-step "><a>确认信息</a></div>
            <div class="completed-step active"><a>支付金额</a></div>
            <div class="completed-step"><a>购买完成</a></div>
        </div>
    </div>
    <div class="hider">
        <a>
            【重要提醒】
        </a>
        ： 本网站及供应商不会以订单异常、系统升级等为由，通过电话、短信等方式要求您点击任何链接进行退款操作。
    </div>
    <div class="orderMes">
        <img src="{{URL::asset('./img/icon/paying.png')}}" alt="">
        <span>
            订单已提交，请于24小时内完成支付
            <a>
                （逾期订单将被关闭）
            </a>
        </span>
    </div>

    <div class="paymes">
        <span>支付信息</span>
        <div>
            <!-- <div :class="{active:checkNum==1}" @click="checkNum=1">
                <img src="{{URL::asset('./img/icon/checktrue.png')}}" alt="" v-if="checkNum==1">
                <img src="{{URL::asset('./img/icon/checkfalse.png')}}" alt="" v-else>
                <img src="{{URL::asset('./img/icon/zhifubao.png')}}" alt="">
            </div> -->
            <div :class="{active:checkNum==2}" @click="checkNum=2">
                <img src="{{URL::asset('./img/icon/checktrue.png')}}" alt="" v-if="checkNum==2">
                <img src="{{URL::asset('./img/icon/checkfalse.png')}}" alt="" v-else>
                <img src="{{URL::asset('./img/icon/weixin.png')}}" alt="">
            </div>
        </div>
    </div>
    <p class="payMony">
        商品金额<span>
            ￥@{{orderData.order_amount}}
        </span>
    </p>
    <p class="payMony">

        邮费
        <span>
            ￥@{{orderData.shipping_price}}
        </span>
    </p>

    <div class="submitOrder">
        订单支付<span>
            ￥@{{orderData.pay_price}}
        </span>
        <button @click="submit">
            立即支付
        </button>
    </div>

    <el-dialog :visible.sync="paying" width="400px" class="payOrderDialog" :close-on-press-escape="false" :close-on-click-modal="false">
        <span class="payOrderDialog_span">￥@{{orderData.pay_price}}</span>
        <div class="payOrderDialog_code">
            <div id="qrcode"></div>
            <span class="payOrderDialog_code_span">微信扫一扫，立即支付</span>
        </div>
    </el-dialog>
</div>
<style>
    .el-dialog__header {
        display: none;
    }

    #qrcode {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<script src="{{ asset('js/vue.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/element.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/public.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/qrcode.min.js') }}" type="text/javascript"></script>
<script>
    $(() => {
        let app = new Vue({
            el: '#actpay',
            data: () => {
                return {
                    headerLogo: '',
                    checkNum: 2,
                    paying: false,
                    orderId: getQueryString("orderId"),
                    ifcart: getQueryString("ifcart") || '',
                    orderData: {}
                }
            },
            created() {
                this.headerLogo = JSON.parse(sessionStorage.getItem("overall")).site_logo
                let data = {
                    order_id: this.orderId,
                    ifcart: this.ifcart,
                }
                apiAjax("{{ route('home.order.buyStep3')}}", 'get', data, (res) => {
                    if (res.code == 0) {
                        this.orderData = res.data;
                    } else {}
                }, (erro) => {

                });
            },
            mounted() {},
            methods: {
                submit() {
                    $('#qrcode').html("");
                    let data = {
                        pay_order: this.orderData.pay_sn,
                        pay_method: 1,
                        order_ids: this.orderData.order_ids,
                    }
                    apiAjax("{{ route('home.order.goodsPayOrder')}}", 'post', data, (res) => {
                        if (res.code == 0) {
                            this.paying = true;
                            this.$nextTick(() => {
                                var qrcode = new QRCode("qrcode", {
                                    text: res.data,
                                    width: 248,
                                    height: 248,
                                    colorDark: "#000000",
                                    colorLight: "#ffffff",
                                    correctLevel: QRCode.CorrectLevel.H
                                });
                                this.timePay();
                            })
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });

                        }
                    }, (erro) => {

                    });
                },
                timePay() {
                    let pay = setInterval(() => {
                        let data = {
                            order_id: this.orderData.id,
                            ifcart: this.ifcart,
                        }
                        apiAjax("{{ route('home.order.buyStep3')}}", 'get', data, (res) => {
                            if (res.code == 0) {
                                if (res.data.order_state == 3) {
                                    this.$message({
                                        message: "支付成功",
                                        type: 'success'
                                    });
                                    window.location.href = "{{ route('home.order.completeOrder') }}"
                                    clearTimeout(pay);
                                }
                            } else {}
                        }, (erro) => {

                        });
                    }, 3000);
                }
            }
        })
    })
</script>